<seed-content>
  <seed-toolbar-header>
    <seed-toolbar-title>排名详情</seed-toolbar-title>
    <seed-toolbar-menu></seed-toolbar-menu>
  </seed-toolbar-header>
  <div class="ranking-detail" *ngIf="rankingInfo">
    <header class="seed-flexbox seed-flexbox-align-center seed-flexbox-content-between">
      <div class="team-info seed-flexbox seed-flexbox-align-center" *ngIf="userInfo">
        <img [src]="userInfo.iconUrl" alt="" seed-load-img (click)="goToPosterPage()">
        <div class="basic-info">
          <h3 class="nick">{{rankingInfo.userName|truncate:5}}</h3>
          <address class="seed-flexbox seed-flexbox-align-center" *ngIf="stateStore.showAddress">
            <p>
              <i> {{userInfo.areaCityName}}</i>{{userInfo.areaDistName}}
            </p>
          </address>
        </div>
      </div>
      <div class="number seed-flexbox-align-center seed-flexbox-content-center seed-flexbox-column">
        <span>{{dataStore.chartNo>999?'99X':dataStore.chartNo}}</span>
        <p>排名</p>
      </div>
    </header>
    <div class="content">
      <div class="md-title">
        <h2 class="title">数据</h2>
      </div>
      <ul><!-- 详情数据 -->
        <ng-container *ngIf="dataStore.isTeam">
          <li *ngFor="let item of dataStore.rankingDetail.teamList">
            <p>
              <span>{{rankingInfo[item.key]>999?'99X':rankingInfo[item.key]}}{{item.symbol? item.symbol : ''}}</span>
              <em>{{item.title}}</em>
            </p>
          </li>
        </ng-container>
        <li *ngFor="let item of dataStore.rankingDetail.defaultList">
          <div [ngSwitch]="item.key">
            <div *ngSwitchCase="'consecutiveWin'"><!-- 足球或其他球类的特殊字段 开小灶显示-->
              <p *ngIf="rankingInfo[item.key] > 0">
                <span >{{rankingInfo[item.key]>999?'99X':rankingInfo[item.key]}}{{item.symbol? item.symbol : ''}}</span>
                <em>连胜</em>
              </p>
              <p *ngIf="rankingInfo[item.key] < 0">
                <span>{{(rankingInfo[item.key] | abs)>999?'99X':rankingInfo[item.key] | abs}}</span>
                <em>连负</em>
              </p>
            </div>
            <div *ngSwitchDefault>
              <p>
                <span>{{rankingInfo[item.key]>999?'99X':rankingInfo[item.key]}}{{item.symbol? item.symbol : ''}}</span>
                <em>{{item.title}}</em>
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</seed-content>
